<template>
	<view class="" style="width: 100%;padding:10rpx" @click="directToQuestionManager(transferItem)">
		<view class="tn-blogger-content__wrap" style="width:100%">
			<view class="image-pic" :style="'background-image:url(' + transferItem.ablum + ')'">
				<view class="image-music">
				</view>
			</view>

			<view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
				<text class="tn-blogger-content__label__desc">{{ transferItem.name }}</text>
			</view>

			<view
				class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">
				<view class="justify-content-item tn-flex tn-flex-col-center">
					<view>
						<view class="tn-color-gray">
							<text class="tn-blogger-content__count-icon tn-icon-flower"></text>
							<text class="tn-padding-right-sm">{{ transferItem.collectionCount }}</text>
							<text class="tn-blogger-content__count-icon tn-icon-message"></text>
							<text class="tn-padding-right-sm">{{ transferItem.commentCount }}</text>
							<text class="tn-blogger-content__count-icon tn-icon-like"></text>
							<text class="">{{ transferItem.likeCount }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>


</template>

<script>
	import {
		memberHasLoginManager
	} from '@/api/login.js'
	export default {
		components: {},
		data() {
			return {}
		},
		props: {
			transferItem: {
				type: Object,
				default: function() {
					return {}
				}
			},
		},

		methods: {
			directToQuestionManager(item) {
				uni.navigateTo({
					url: '/pages/question/questionDetail?partId=' + item.part_id
				})
			}
		}

	}
</script>

<style lang='scss' scoped>
	@import '@/static/css/templatePage/custom_nav_bar.scss';

	.template-music {}

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 5rpx;
			font-size: 40rpx;
			margin-right: 10rpx;
			margin-left: 30rpx;
			flex-basis: 5%;
		}

		&__search {
			flex-basis: 60%;
			width: 100%;
			height: 100%;

			&__box {
				width: 100%;
				height: 70%;
				padding: 10rpx 0;
				margin: 0 30rpx;
				border-radius: 60rpx 60rpx 0 60rpx;
				font-size: 24rpx;
				background-color: rgba(255, 255, 255, 0.2);
			}

			&__icon {
				padding-right: 10rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}

			&__text {}
		}
	}

	/* 自定义导航栏内容 end */

	/* 图标容器12 start */
	.tn-three {
		position: absolute;
		top: 50%;
		right: 50%;
		bottom: 50%;
		left: 50%;
		transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
		text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
	}

	.icon12 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);


				}
			}
		}
	}


	/* 文章内容 start*/
	.tn-blogger-content {
		&__wrap {
			box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 20rpx;
			margin: 15rpx;
		}

		&__info {
			&__btn {
				margin-right: -12rpx;
				opacity: 0.5;
			}
		}

		&__label {
			&__item {
				line-height: 45rpx;
				padding: 0 20rpx;
				margin: 5rpx 18rpx 0 0;

				&--prefix {
					color: #82B2FF;
					padding-right: 10rpx;
				}
			}

			&__desc {
				line-height: 35rpx;
			}
		}

		&__main-image {
			border-radius: 16rpx 16rpx 0 0;

			&--1 {
				max-width: 690rpx;
				min-width: 690rpx;
				max-height: 400rpx;
				min-height: 400rpx;
			}

			&--2 {
				max-width: 260rpx;
				max-height: 260rpx;
			}

			&--3 {
				height: 212rpx;
				width: 100%;
			}
		}

		&__count-icon {
			font-size: 30rpx;
			padding-right: 5rpx;
		}
	}

	.image-music {
		padding: 150rpx 0rpx;
		font-size: 16rpx;
		font-weight: 300;
		position: relative;
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 20rpx 20rpx 0 0;
	}

	/* 文章内容 end*/
</style>